// 浸渍
<template>
  <div class="container card">
    <el-tabs v-model="dipactiveName" type="card" @tab-click="handleClick">
      <el-tab-pane label="热油炉及预热炉小时制表" name="hotOilone">
        <hotOilone v-if="hotOilone" />
      </el-tab-pane>
      <el-tab-pane label="二烧车间天然气用量" name="hotOileight">
        <hotOileight v-if="hotOileight" />
      </el-tab-pane>
      <el-tab-pane label="浸渍系统运行记录" name="impregnationSystem">
        <impregnationSystem v-if="impregnationSystem" />
      </el-tab-pane>
       <el-tab-pane label="交接班表" name="handover">
        <handover v-if="handover" />
      </el-tab-pane>
      <el-tab-pane label="产品信息" name="productInfo">
        <productInfo v-if="productInfo" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import hotOilone from './hotOilone'
import hotOileight from './hotOileight'
import impregnationSystem from './impregnationSystem'
import productInfo from './productInfo'
import handover from './handover'
export default {
  name: '',
  components: {
    hotOilone,
    hotOileight,
    impregnationSystem,
    productInfo,
    handover
  },
  props: {},
  data () {
    return {
      dipactiveName: 'hotOilone',
      hotOilone: true,
      hotOileight: false,
      impregnationSystem: false,
      productInfo: false,
      handover: false
    }
  },
  computed: {},
  watch: {},
  created () {
    // 四兄弟之一的impregnationsystem(因为他有子tabs)
    if (sessionStorage.getItem('dipactiveName')) { // 如果dipactiveName是那几个儿子tabs(operationsun这些)
      if (sessionStorage.getItem('dipactiveName') === 'operationSum' || sessionStorage.getItem('dipactiveName') === 'eachProcessTime' || sessionStorage.getItem('dipactiveName') === 'frame1' || sessionStorage.getItem('dipactiveName') === 'frame2' || sessionStorage.getItem('dipactiveName') === 'frame3' || sessionStorage.getItem('dipactiveName') === 'frame4' || sessionStorage.getItem('dipactiveName') === 'frame5' || sessionStorage.getItem('dipactiveName') === 'frame6') {
        this.dipactiveName = 'impregnationSystem' // 就把他们的父亲impregnationsystem赋给dipactiveName 因为dipactiveName是子tabs的情况是在当前子tabs页面点创建操作并点返回或提交退出dialog 这时候再点别的子tabs进行刚创建时 dipactiveName换成他们父亲impregnationsystem
        this.hotOilone = false
        this.hotOileight = false
        this.impregnationSystem = true
        this.productInfo = false
        this.handover = false
        // console.log('111', this.dipactiveName)
      } else { // 如果是子tabs的父亲和叔叔们进行创建操作 点返回之后 dipactiveName就变成刚刚操作的叔叔或父亲
        this.dipactiveName = sessionStorage.getItem('dipactiveName')
        // console.log('222', this.dipactiveName)
        switch (sessionStorage.getItem('dipactiveName')) {
          case 'hotOileight':
            this.hotOilone = false
            this.hotOileight = true
            this.impregnationSystem = false
            this.productInfo = false
            this.handover = false
            break
          case 'impregnationSystem':
            this.hotOilone = false
            this.hotOileight = false
            this.impregnationSystem = true
            this.productInfo = false
            this.handover = false
            break
          case 'handover':
            this.hotOilone = false
            this.hotOileight = false
            this.impregnationSystem = false
            this.productInfo = false
            this.handover = true
            break
          case 'productInfo':
            this.hotOilone = false
            this.hotOileight = false
            this.impregnationSystem = false
            this.productInfo = true
            this.handover = false
            break
          default:
            console.log('找不到页面')
            break
        }
      }
    }
  },
  beforeDestory () {
    sessionStorage.setItem('dipactiveName', 'hotOilone') // 当销毁浸渍组件的时候 去别的组件(石墨化) sessionstorage里存了dipactiveName
  },

  mounted () { },
  methods: {
    handleClick (tab) {
      // console.log(tab.index)
      switch (tab.index) {
        case '0':
          this.hotOilone = true
          this.hotOileight = false
          this.impregnationSystem = false
          this.handover = false
          this.productInfo = false
          break
        case '1':
          this.hotOilone = false
          this.hotOileight = true
          this.impregnationSystem = false
          this.handover = false
          this.productInfo = false
          break
        case '2':
          this.hotOilone = false
          this.hotOileight = false
          this.impregnationSystem = true
          this.handover = false
          this.productInfo = false
          break
        case '3':
          this.hotOilone = false
          this.hotOileight = false
          this.impregnationSystem = false
          this.handover = true
          this.productInfo = false
          break
        case '4':
          this.hotOilone = false
          this.hotOileight = false
          this.impregnationSystem = false
          this.handover = false
          this.productInfo = true
          break
        default:
          console.log('出错了')
          break
      }
    }
  }
}
</script>

<style scoped lang=''>
</style>
